import React from 'react';
import './Journey.css'

// 导入选择箭头图片
import switchImg from '../../imgs/switch.svg'

export default function Journey(props) {

    const {
        from,
        to,
        // 两个回调函数，分别是倒换起始位置和展示城市选择浮层
        exChangeFromTo,
        showCitySelector,
    } = props;



    return (
        <div className="journey">
            <div className="journey-station"
                onClick={() => showCitySelector(true)}
            >
                <input type="text"
                    readOnly
                    name="from"
                    value={from}
                    className="journey-input journey-from"
                />
            </div>
            <div className="journey-switch" onClick={() => exChangeFromTo()}>
                <img src={switchImg} width="70" height="40" alt="switch" />
            </div>
            <div className="journey-station"
                onClick={() => showCitySelector(false)}
            >
                <input type="text"
                    readOnly
                    name="to"
                    value={to}
                    className="journey-input journey-to"
                />
            </div>
        </div>
    )
}